<template>
	<ul class="a-submenu">
		<div class="title" @click="handleClick">
			<slot name="title"></slot>
            <div class="icon" :style="{ transform: `rotateZ(${isShow?0:180}deg)`}">^</div>
		</div>
		<div class="three-level" v-show="isShow">
			<slot></slot>
		</div>
	</ul>
</template>

<script>
export default {
	name: "a-submenu",
	data() {
		return {
            isShow:true
        };
	},
	mounted() {},
	methods: {
        handleClick(){
            this.isShow = !this.isShow
        }
    },
};
</script>

<style lang="less" scoped>
.a-submenu {
    width: 100%;
    padding: 0;
    user-select: none;
	.title {
		background-color: brown;
        display: flex;
        justify-content: space-between;
	}
	.three-level {
		background-color: brown;
         padding-left:15px;
	}
    .icon{
        font-size: 22px;
        text-align: right;
    }
}
</style>